<script setup lang="ts">
import RoadDetail from '@/views/Home/RoadDetail.vue'
import EnterDetail from '@/views/Home/EnterDetail.vue'
import InView from '@/components/InView.vue'
import PopupModal from '@/views/Home/PopupModal.vue'
import { ref } from 'vue'
import MusicPlayer from '@/components/MusicPlayer.vue'
import { sleep } from '@/utils'

const showTips = ref(false)
const showKnow = ref(false)
async function showTipsModal() {
  await sleep(200)
  showTips.value = true
}
async function showKnowModal() {
  await sleep(200)
  showKnow.value = true
}
</script>

<template>
  <main>
    <div class="logo" />
    <div class="person animated zoomIn" />
    <div class="title animated fadeIn delay-2x">
      <img src="@/assets/images/4.gif" />
    </div>
    <div class="address animated fadeInLeft delay-2x">
      <div class="address-text animated fadeIn delay-4x" />
    </div>
    <InView animate-class-name="fadeIn">
      <div class="divide" />
    </InView>
    <RoadDetail />
    <InView animate-class-name="fadeIn">
      <div class="divide divide2" />
    </InView>
    <EnterDetail />
    <div class="notice-decorate" />
    <InView animate-class-name="fadeIn">
      <div class="divide divide3" />
    </InView>
    <InView animate-class-name="fadeInUp">
      <div class="btn-tips clickable" @click="showTipsModal" />
      <div class="btn-know clickable" @click="showKnowModal" />
    </InView>
    <InView animate-class-name="fadeInUp">
      <div class="end">
        <img src="@/assets/images/5.gif" />
      </div>
    </InView>
    <PopupModal v-show="showTips" @close="showTips = false">
      <template #title>
        <img style="width: 330px" src="@/assets/images/tips-title.png" />
      </template>
      <template #default>
        <img src="@/assets/images/tips-text.png" style="width: 620px" />
      </template>
    </PopupModal>
    <PopupModal v-show="showKnow" @close="showKnow = false">
      <template #title>
        <img style="width: 330px" src="@/assets/images/know-title.png" />
      </template>
      <template #default>
        <img src="@/assets/images/know-text.png" style="width: 620px" />
      </template>
    </PopupModal>
    <MusicPlayer />
  </main>
</template>

<style lang="scss" scoped>
main {
  height: 8424px;
  width: 750px;
  overflow-x: hidden;
  background: url('@/assets/images/bg.png') no-repeat center center;
  background-size: cover;
  padding-top: 48px;
  --animate-duration: 1s;
}

.logo {
  width: 100%;
  height: 62px;
  background: url('@/assets/images/logo.png') no-repeat center center;
  background-size: contain;
}

.person {
  height: 1270px;
  background: url('@/assets/images/person.png') no-repeat center center;
  background-size: contain;
  margin-top: 141px;
}

.title {
  height: 176px;
  background: url('@/assets/images/main-title.png') no-repeat center center;
  background-size: contain;
  margin-top: -580px;
  img {
    width: 690px;
    display: block;
    margin: auto;
    transform: translateY(-10px);
  }
}

.address {
  height: 216px;
  background: url('@/assets/images/address-bg.png') no-repeat center center;
  background-size: contain;
  margin-top: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.address-text {
  height: 130px;
  width: 417px;
  background: url('@/assets/images/address.png') no-repeat center center;
  background-size: contain;
}

.divide {
  height: 28px;
  background: url('@/assets/images/divide.png') no-repeat center center;
  background-size: contain;
  margin: 40px 0;
}

.divide2 {
  margin: 109px 0 92px;
}

.notice-decorate {
  height: 220px;
  background: url('@/assets/images/1.gif') no-repeat 0 center;
  background-size: contain;
  margin-left: -20px;
  margin-top: -60px;
  position: relative;
  z-index: 3;
}

.divide3 {
  margin: 41px 0 67px;
}

.btn-tips,
.btn-know {
  height: 120px;
  width: 395px;
  background: url('@/assets/images/btn-tips.png') no-repeat center center;
  background-size: cover;
  margin: 0 auto;
}

.btn-know {
  margin-top: 53px;
  background-image: url('@/assets/images/btn-know.png');
}

.end {
  height: 194px;
  background: url('@/assets/images/end.png') no-repeat center center;
  background-size: contain;
  margin-top: 113px;
  img {
    width: 536px;
    display: block;
    margin: 0 0 0 106px;
    transform: translateY(-13px);
  }
}
</style>
